<template>
  <div class="publish-container">
    <!--面包导航区域  -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/login' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{path:'/detailsManage'}">艺术涂料管理</el-breadcrumb-item>
      <el-breadcrumb-item>添加艺术涂料</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片 -->
    <el-card class="box-card">
      <!-- 标题 -->
      <div slot="header" class="clearfix">
        <span>内容添加</span>
      </div>
      <!-- 表单 -->
      <el-form ref="addArtRef" :model="art" :rules="addFormRules" label-width="50px">
        <div class="art-title">展示层</div>
        <el-form-item label="标题" prop="title">
          <el-input v-model="art.title" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="英文" prop="EnglishName">
          <el-input v-model="art.EnglishName" show-word-limit></el-input>
        </el-form-item>

        <el-form-item label="封面">
          <el-radio-group v-model="art.img" class="upload-img">
            <el-upload class="avatar-uploader" action="http://47.119.123.95:3000/art/img" :show-file-list="false"
              :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
              <img v-if="art.img" :src="art.img" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="分类">
          <el-select v-model="art.classify" placeholder="请选择分类">
            <el-option label="艺术涂料" value="艺术涂料"></el-option>
            <el-option label="艺术墙绘" value="艺术墙绘"></el-option>
            <el-option label="艺术浮雕" value="艺术浮雕"></el-option>
          </el-select>
        </el-form-item>

        <!-- 详细层 -->
        <div class="art-title" style="margin-top:80px">详情层</div>

        <!-- 文本内容区域 -->
        <el-form-item label="内容">
          <el-tiptap v-model="art.details[0].article" :extensions="extensions" lang="zh" height="500"
            placeholder="请输入文章内容"></el-tiptap>
        </el-form-item>

        <div class="art-title" style="margin-top:80px">美术起源</div>
        <el-form-item label="">
          <el-tiptap v-model="art.details[0].article2" :extensions="extensions" lang="zh" height="500"
            placeholder="请输入文章内容"></el-tiptap>
        </el-form-item>

        <div class="art-title" style="margin-top:80px">产品特性 <span style="color:#c3c3c3">（建议上传尺寸为 600*200，宽高比为3:1）</span>
        </div>
        <el-form-item label="图片">
          <el-radio-group v-model="art.details[0].article3" class="upload-img">
            <el-upload class="avatar-uploader" action="http://47.119.123.95:3000/art/img" :show-file-list="false"
              :on-success="handleAvatarSuccess3" :before-upload="beforeAvatarUpload">
              <img v-if="art.details[0].article3" :src="art.details[0].article3" class="avatar2" />
              <i v-else class="el-icon-plus avatar-uploader-icon2"></i>
            </el-upload>
          </el-radio-group>
        </el-form-item>

        <div class="art-title" style="margin-top:80px">建议使用 <span style="color:#c3c3c3">（建议上传尺寸为 600*200，宽高比为3:1）</span>
        </div>
        <el-form-item label="图片">
          <el-radio-group v-model="art.details[0].article4" class="upload-img">
            <el-upload class="avatar-uploader" action="http://47.119.123.95:3000/art/img" :show-file-list="false"
              :on-success="handleAvatarSuccess4" :before-upload="beforeAvatarUpload">
              <img v-if="art.details[0].article4" :src="art.details[0].article4" class="avatar2" />
              <i v-else class="el-icon-plus avatar-uploader-icon2"></i>
            </el-upload>
          </el-radio-group>
        </el-form-item>

        <div class="art-title" style="margin-top:80px">系列色卡 <span style="color:#c3c3c3">（请提前自行排版后上传整图）</span></div>
        <el-form-item label="图片">
          <el-radio-group v-model="art.details[0].img" class="upload-img">
            <el-upload class="avatar-uploader" action="http://47.119.123.95:3000/art/img" :show-file-list="false"
              :on-success="handleAvatarSuccess2" :before-upload="beforeAvatarUpload">
              <img v-if="art.details[0].img" :src="art.details[0].img" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-radio-group>
        </el-form-item>

        <el-form-item>
          <el-button @click="$router.go(-1)">返回</el-button>
          <el-button type="primary" @click="preservation()">保存</el-button>
        </el-form-item>
      </el-form>

    </el-card>

  </div>
</template>

<script>
import { getArtID, postUpdateArt, postAddImg } from '@/api/art.js'
import {
  // necessary extensions
  ElementTiptap,
  Doc,
  Text,
  Paragraph,
  Heading,
  Bold,
  Underline,
  Italic,
  Strike,
  ListItem,
  BulletList,
  OrderedList,
  Image,
  CodeBlock,
  Link,
  TextAlign,
  Indent,
  TextColor,
  Preview,
  Fullscreen,
} from "element-tiptap";

// 富文本编辑器
import "element-tiptap/lib/index.css";
export default {
  name: 'ArtEdit',
  components: {
    "el-tiptap": ElementTiptap,
  },
  data () {
    return {
      //艺术涂料信息
      art: {
        title: "",
        img: "",
        classify: "",
        EnglishName: "",
        details: [
          {
            title: "",
            img: "",
            article: "",
            article2: "",
            article3: "",
            article4: "",
          }
        ]
      },
      //获取艺术涂料参数
      artParams: {
        id: null
      },
      addFormRules: {
        title: [
          { required: true, message: '请输入用户名称', trigger: 'blur' }
        ],
        EnglishName: [
          { required: true, message: '请输入用户名称', trigger: 'blur' }
        ]
      },
      dynamicValidateForm: {
        domains: [{
          value: ''
        }],
        email: ''
      },
      //富文本功能
      extensions: [
        new Doc(),
        new Text(),
        new Paragraph(),
        new Heading({ level: 5 }), //标题
        new Bold({ bubble: true }), // render command-button in bubble menu.
        new Underline({ bubble: true }), //下划线
        new Italic(), //斜体
        new Strike(), //删除线
        new ListItem(),
        new BulletList(), //无序列表
        new OrderedList(), //有序列表
        new Image(
          {
            uploadRequest: (file) => {
              console.log(file)
              const fd = new FormData()
              fd.append('image', file)
              return postAddImg(fd).then(res => {
                // console.log(res.data)
                return res.data.url
              })
            }
          }
        ), //图片
        new CodeBlock(), //代码块
        new Link(), //连接
        new TextAlign(), //文本对齐
        new Indent(), //缩进
        new TextColor(), //文字样式
        new Preview(), //预览
        new Fullscreen(), //全屏
      ],
    };
  },
  computed: {},
  methods: {
    //修改艺术涂料
    async loadArtInfo () {
      console.log(this.artParams.id)
      const { data: res } = await getArtID(this.artParams);
      console.log(res)
      this.art = res.arrData[0]
      console.log(this.art)
    },
    //保存
    async preservation () {
      this.$refs.addArtRef.validate(async valid => {
        if (!valid) return
        const { data: res } = await postUpdateArt(this.art)
        if (res.meta.status !== 200) return this.$message.error("艺术涂料修改失败");
        this.$message.success("艺术涂料修改成功");
        this.$router.push("/detailsManage");
      })
    },
    handleAvatarSuccess (res, file) {
      console.log(res)

      this.art.img = res.url;
      console.log(file)
    },
    handleAvatarSuccess2 (res, file, fileList) {
      this.art.details[0].img = res.url;
      console.log(file)
      console.log(fileList)
    },
    handleAvatarSuccess3 (res, file, fileList) {
      this.art.details[0].article3 = res.url;
      console.log(file)
      console.log(fileList)
    },
    handleAvatarSuccess4 (res, file, fileList) {
      this.art.details[0].article4 = res.url;
      console.log(file)
      console.log(fileList)
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
  created () {
    this.artParams.id = this.$route.params.id
    console.log(this.artParams.id)
    this.loadArtInfo()
  },
  mounted () { },
};
</script>

<style  scoped>
.upload-img {
  border: 1px dashed;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar-uploader-icon2 {
  font-size: 28px;
  color: #8c939d;
  width: 534px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.avatar2 {
  width: 534px;
  height: 178px;
  display: block;
}
.art-title {
  color: #409eff;
  font-weight: 500;
  margin-bottom: 20px;
}
</style>